<!DOCTYPE html>
<html lang="zh-CN" class="io-grey-mode">
<head>
    <script>
        const default_c = "io-grey-mode";
        const night = document.cookie.replace(/(?:(?:^|.*;\s*)io_night_mode\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        try {
            if (night === "0" || (!night && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
                document.documentElement.classList.add("io-black-mode");
                document.documentElement.classList.remove(default_c);
            } else {
                document.documentElement.classList.remove("io-black-mode");
                document.documentElement.classList.add(default_c);
            }
        } catch (_) {
        }
    </script>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>[[${SITE_CONFIG?.SITE_NAME}]]</title>
    <meta name="theme-color" content="#f9f9f9"/>
    <meta name="keywords" th:content="${SITE_CONFIG?.SITE_KWD}"/>
    <meta name="description" th:content="${SITE_CONFIG?.SITE_DESC}"/>
    <meta property="og:type" content="website">
    <meta property="og:url" content="/"/>
    <meta property="og:title" th:content="${SITE_CONFIG?.SITE_NAME}">
    <meta property="og:description" th:content="${SITE_CONFIG?.SITE_DESC}">
    <meta property="og:image" content="/favicon.ico">
    <meta property="og:site_name" th:content="${SITE_CONFIG?.SITE_NAME}">
    <meta name='robots' content='max-image-preview:large'/>
    <link rel='stylesheet' id='iconfont-css' href='/web/css/iconfont.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='bootstrap-css' href='/web/css/bootstrap.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='style-css' href='/web/css/style.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='swiper-css' href='/web/css/swiper-bundle.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='chatgpt-css' href='/web/css/chatgpt.min.css' type='text/css' media='all'/>
    <script type='text/javascript' src='/web/js/jquery.min.js' id='jquery-js'></script>
    <script type='text/javascript' id='jquery-js-after'>
        /* <![CDATA[ */
        function loadFunc(func) {
            if (document.all) {
                window.attachEvent("onload", func);
            } else {
                window.addEventListener("load", func, false);
            }
        }
        /* ]]> */
    </script>
    <style>.navbar-nav .menu-item-286 a {
        background: #ff8116;
        border-radius: 50px !important;
        padding: 5px 10px !important;
        margin: 5px 0 !important;
        color: #fff !important;
    }

    .navbar-nav .menu-item-286 a i {
        position: absolute;
        top: 0;
        right: -10px;
        color: #f13522;
    }

    .io-black-mode .navbar-nav .menu-item-286 a {
        background: #ce9412;
    }

    .io-black-mode .navbar-nav .menu-item-286 a i {
        color: #fff;
    }

    .markdown-body p a {
        color: #007bff;
        text-decoration: none;
        background-color: transparent
    }

    @media (min-width: 768px) {
        .main-content {
            margin-left: 220px;
        }

    }</style>
</head>
<body class="home blog">
<sidebar th:replace="web/module/sidebar::index(false)"></sidebar>
<div class="main-content flex-fill" style="height: 100%">
    <nav th:replace="web/module/navbar::banner(false)"></nav>
    <div id="content" class="container my-2 my-md-3" style="height: 85%">
        <div class="chat-main" style="width:100%">
            <div class="window-header">
                <div class="window-header-title">
                    <div class="name">
                        <a href="/login?redirectTo=chatai">
                            <div class="window-header-main-title home_chat-body-title__5S8w4"
                                 th:if="${loginUser==null}">
                                点击登录，体验泰聪明AI助手
                            </div>
                        </a>
                        <div class="window-header-main-title home_chat-body-title__5S8w4" th:if="${loginUser!=null}">
                            [[${loginUser?.username}]]
                        </div>
                        <div class="chat-annotation" th:if="${loginUser != null}">
                            <div th:switch="-1">
                                <a th:case="-1"
                                   href="#"
                                   class="annotation"
                                   data-target="#registerModal"
                                   data-toggle="modal"
                                >关注洛阳泰山CSDN，提升每天对话次数</a>
                                <span th:case="0" class="annotation">审核中</span>
                                <span th:case="1" class="annotation">试用中，添加管理员微信 vxhqqh 催审核</span>
                                <div class="c-bubble-trigger com-verification" th:case="2">
                                    <i class="verified"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="window-header-sub-title">与泰聪明的 <span id="chatCnt">0</span> 条对话
                        <span class="info">以天为单位，无限期重置）</span></div>
                </div>
                <!-- 加一个下拉框，-->
                <div class="chat-type">
                    <select class="styled-dropdown" id="chat-type">
                        <option value="CHAT_GPT_4" >chat-gpt4</option>
                        <option value="GEMINI" >谷歌gemini</option>
                        <option value="CHAT_GPT_3_5_16K" >gpt-3.5-turbo-16k</option>
                        <option value="CHAT_GPT_3_5" >gpt-3.5-turbo</option>
                        <option value="LLAMA_2_7B" >Meta Llama2</option>
                        <option value="WEI_XIN_4" >文心一言4.0</option>
                        <option value="WEI_XIN_3_5" >文心一言3.5</option>
                        <option value="XUN_FEI_3_5" >讯飞星火3.5</option>
                        <option value="XUN_FEI_3" >讯飞星火3</option>
                        <option value="TONG_YI_MAX" >通义千问MAX</option>
                        <option value="YI_34B_CHAT" >零一万物</option>
                    </select>
                </div>
            </div>
            <div class="message-content" id="chat-content">
            </div>
            <div class="chat-input">
                    <textarea id="input-field" class="form-control" rows="3" placeholder="你好，我是泰聪明，快登录和我对线吧"
                              disabled></textarea>
                <button id="send-btn" disabled>
                    <div class="button_icon-button-icon__qlUH3 no-dark">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             width="16" height="16" fill="none">
                            <defs>
                                <path id="send-white_svg__a" d="M0 0h16v16H0z"></path>
                            </defs>
                            <g>
                                <mask id="send-white_svg__b" fill="#fff">
                                    <use xlink:href="#send-white_svg__a"></use>
                                </mask>
                                <g mask="url(#send-white_svg__b)">
                                    <path transform="translate(1.333 2)"
                                          d="M0 4.71 6.67 6l1.67 6.67L12.67 0 0 4.71Z"
                                          style="stroke: rgb(255, 255, 255); stroke-width: 1.33333; stroke-opacity: 1; stroke-dasharray: 0, 0;"></path>
                                    <path transform="translate(8.003 6.117)" d="M0 1.89 1.89 0"
                                          style="stroke: rgb(255, 255, 255); stroke-width: 1.33333; stroke-opacity: 1; stroke-dasharray: 0, 0;"></path>
                                </g>
                            </g>
                        </svg>
                    </div>
                    <div class="button_icon-button-text__k3vob">等待登录</div>
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade search-modal" id="chat-share-modal">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div id="search" class="s-search mx-auto my-4">
                    <div  class="super-search-fm">
                        <input type="text" id="chat-share-link" class="form-control smart-tips search-key" style="height: 50px;font-size: 1pc" readonly>
                        <button id="link-copy" style="color: white;width: 80px;">复制链接</button>
                    </div>
                </div>
            </div>
            <div style="position: absolute;bottom: -40px;width: 100%;text-align: center;"><a href="javascript:" data-dismiss="modal"><i class="iconfont icon-close-circle icon-2x" style="color: #fff;"></i></a></div>
        </div>
       <!-- <div class="modal-content">
            <div class="modal-body">
                <div id="search" class="s-search mx-auto my-4">
                    <form action="https://s.taobao.com/search?q=%s%" method="get" target="_blank" class="super-search-fm">
                        <input type="text" id="m_search-text" class="form-control smart-tips search-key" zhannei="" autocomplete="off" placeholder="淘宝" style="outline:0" data-status="true">
                        <button type="submit" id="btn_search_popover"><i class="iconfont icon-search"></i></button>
                    </form>
                </div>
            </div>
            <div style="position: absolute;bottom: -40px;width: 100%;text-align: center;"><a href="javascript:" data-dismiss="modal"><i class="iconfont icon-close-circle icon-2x" style="color: #fff;"></i></a></div>
        </div>-->
    </div>
</div>
<footer th:replace="web/module/footer"></footer>
<script type='text/javascript' src='/web/js/marked.min.js' id='marked-js'></script>
<script type='text/javascript' src='/web/js/popper.min.js' id='popper-js'></script>
<script type='text/javascript' src='/web/js/bootstrap.min.js' id='bootstrap-js'></script>
<script type='text/javascript' src='/web/js/theia-sticky-sidebar.min.js' id='sidebar-js'></script>
<script type='text/javascript' src='/web/js/lazyload.min.js' id='lazyload-js'></script>
<script type='text/javascript' src='/web/js/highlight.min.js' id='highlight-js'></script>
<script type='text/javascript' src="/web/js/clipboard.min.js"></script>
<script type='text/javascript' id='appjs-js-extra'>
    const theme = {
        "formpostion": "top",
        "defaultclass": "io-grey-mode",
        "isCustomize": "1",
        "urlformat": "1",
        "customizemax": "10",
        "newWindow": "0",
        "lazyload": "1",
        "minNav": "0",
        "loading": "0",
        "hotWords": "baidu",
        "classColumns": " col-2a col-sm-2a col-md-2a col-lg-3a col-xl-5a col-xxl-6a ",
        "isHome": ""
    };
    const localize = {
        "lightMode": "\u65e5\u95f4\u6a21\u5f0f",
        "nightMode": "\u591c\u95f4\u6a21\u5f0f"
    };
</script>
<script type='text/javascript' src='/web/js/app.js'></script>
<script type='text/javascript' id='appjs-js-after'>
    $(document).ready(function () {
        if ($("#search-text")[0]) {
            $("#search-text").focus();
        }
    });
</script>
<script th:inline="javascript">
    let hash = location.hash;
    hash = hash ? hash : '#YI_34B_CHAT';
    const chatType=$('#chat-type')
    $('#chat-type option').each(function() {
        // 检查当前option的value是否等于"option1"
        let option='#'+$(this).val();
        if ( option === hash) {
            // 如果等于，设置该option为选中状态
            $(this).prop('selected', true);
            // 退出遍历
            return false;
        }
    });
    const inputField = $("#input-field");
    const sendBtn = $("#send-btn"), sendBtnText = $(".button_icon-button-text__k3vob");
    const chatContent = $("#chat-content");
    // 用户名
    const chatTitle = $(".window-header-main-title");
    const user = [[${loginUser}]];
    const isLogin = user !== null;
    $(function () {
        if (isLogin) {
            // 改变 chatTitle 的内容
            chatTitle.text(user.userName);
            inputField.val("");
            inputField.attr("placeholder", "可按回车发送");
            sendBtnText.text("发送");
            let aiType = chatType.val();
            chatHistory(user.id, aiType);
        } else {
            console.log("请先登录");
        }
    });

    function subscribe(res,content) {
       // console.log("content",content);
        // 记录聊天次数
        $("#chatCnt").html(` ${res.usedCnt}/${res.maxCnt} `);
        // 把 home_chat-message-actions__loading 的元素移除，不再显示 loading
        $(".home_chat-message-actions__loading").remove();
        const chatId = res.chatUid;
        const time = res.answerTime;
       // console.log("res:",res);
        appendServerMsg(chatId,content,time);
    }

    async function chatHistory(userId, aiType) {
        chatDisabled();
        await fetch('/chat/history/' + userId + '/' + aiType) // 替换为你要请求的URL
            .then(response => {
                // 检查响应状态码是否为200
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); // 将响应解析为JSON
            })
            .then(res => {
                // 记录聊天次数
                $("#chatCnt").html(` ${res.usedCnt}/${res.maxCnt} `);
                const data = res.records;
                // 把 home_chat-message-actions__loading 的元素移除，不再显示 loading
                $(".home_chat-message-actions__loading").remove();
                // 返回历史全部信息
                chatContent.html('');
                for (let i = data.length - 1; i >= 0; i--) {
                    if (data[i].question) {
                        addClientMsg(data[i].question, false);
                    }
                    if (i === 0) {
                        addSplit();
                    }
                    const chatId = data[i].chatUid;
                    let content = data[i].answer;
                    const time = data[i].answerTime;
                    appendServerMsg(chatId, content, time);
                }

            })
            .catch(error => {
                console.error('There has been a problem with your fetch operation:', error);
            });
        chatNormal();
    }

    chatType.change(function (e) {
        if (isLogin) {
            chatContent.html('');
            let aiType = chatType.val();
            chatHistory(user.id,aiType);
            window.location.href='#'+aiType;
        } else {
            console.log("请先登录");
        }
    });

    function markedHtml(markdownText) {
        return  marked.parse(markdownText);
    }

    // 添加服务器端消息
    function appendServerMsg(chatId,content,time) {
        let answerDiv = $(`#${chatId}`)
       // console.log("流式结果返回: ",content);
        if (answerDiv.length ==0) {
            let serverMsg = `
            <div class="home_chat-message__rdH_g server-msg">
                <div class="home_chat-message-container__plj_e">
                    <div class="home_chat-message-avatar__611lI">
                        <div class="no-dark">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" fill="none">
                                <defs><path id="bot_svg__a" d="M0 0h30v30H0z"></path><path id="bot_svg__c" d="M0 0h20.455v20.455H0z"></path></defs><g><rect fill="var(--pai-bg-normal-1)" width="30" height="30" rx="10"></rect><mask id="bot_svg__b" fill="#fff"><use xlink:href="#bot_svg__a"></use></mask><g mask="url(#bot_svg__b)"><g transform="translate(4.773 4.773)"><mask id="bot_svg__d" fill="#fff"><use xlink:href="#bot_svg__c"></use></mask><g mask="url(#bot_svg__d)"><path fill-rule="evenodd" d="M19.11 8.37c.17-.52.26-1.06.26-1.61 0-.9-.24-1.79-.71-2.57a5.24 5.24 0 0 0-4.53-2.59c-.37 0-.73.04-1.09.11A5.201 5.201 0 0 0 9.17 0h-.04C6.86 0 4.86 1.44 4.16 3.57A5.11 5.11 0 0 0 .71 6.04C.24 6.83 0 7.72 0 8.63c0 1.27.48 2.51 1.35 3.45-.18.52-.27 1.07-.27 1.61 0 .91.25 1.8.71 2.58 1.13 1.94 3.41 2.94 5.63 2.47a5.18 5.18 0 0 0 3.86 1.71h.05c2.26 0 4.27-1.44 4.97-3.57a5.132 5.132 0 0 0 3.45-2.47c.46-.78.7-1.67.7-2.58 0-1.28-.48-2.51-1.34-3.46ZM8.947 18.158c-.04.03-.08.05-.12.07.7.58 1.57.89 2.48.89h.01c2.14 0 3.88-1.72 3.88-3.83v-4.76c0-.02-.02-.04-.04-.05l-1.74-.99v5.75c0 .23-.13.45-.34.57l-4.13 2.35Zm-.67-1.153 4.17-2.38c.02-.01.03-.03.03-.05v-1.99l-5.04 2.87c-.21.12-.47.12-.68 0l-4.13-2.35c-.04-.02-.09-.06-.12-.07-.04.21-.06.43-.06.65 0 .67.18 1.33.52 1.92v-.01c.7 1.19 1.98 1.92 3.37 1.92.68 0 1.35-.18 1.94-.51ZM3.903 5.168v-.14c-.85.31-1.57.9-2.02 1.68a3.78 3.78 0 0 0-.52 1.91c0 1.37.74 2.64 1.94 3.33l4.17 2.37c.02.01.04.01.06 0l1.75-1-5.04-2.87a.64.64 0 0 1-.34-.57v-4.71Zm13.253 3.337-4.18-2.38c-.02 0-.04 0-.06.01l-1.74.99 5.04 2.87c.21.12.34.34.34.58v4.85c1.52-.56 2.54-1.99 2.54-3.6 0-1.37-.74-2.63-1.94-3.32ZM8.014 5.83c-.02.01-.03.03-.03.05v1.99L13.024 5a.692.692 0 0 1 .68 0l4.13 2.35c.04.02.08.05.12.07.03-.21.05-.43.05-.65 0-2.11-1.74-3.83-3.88-3.83-.68 0-1.35.18-1.94.51l-4.17 2.38Zm1.133-4.492c-2.15 0-3.89 1.72-3.89 3.83v4.76c0 .02.02.03.03.04l1.75 1v-5.75c0-.23.13-.45.34-.57l4.13-2.35c.04-.03.09-.06.12-.07-.7-.58-1.58-.89-2.48-.89ZM7.983 11.51l2.24 1.27 2.25-1.27V8.95l-2.25-1.28-2.24 1.28v2.56Z" style="fill: var(--pai-brand-1-normal);"></path></g></g></g></g>
                            </svg>
                        </div>
                    </div>
                    <div class="home_chat-message-item__hDEOq">
                        <div class="home_chat-message-top-actions__PfOzb">
                            <div class="home_chat-message-top-action__wXKmA share">分享</div>
                            <div class="home_chat-message-top-action__wXKmA copy">复制</div>
                        </div>
                        <div id="${chatId}" class="markdown-body">
                        </div>
                    </div>
                    <div class="home_chat-message-actions__nrHd1">
                        <div class="home_chat-message-action-date__6ToUp">${time}</div>
                    </div>
                </div>
            </div>
            `;
            chatContent.append(serverMsg);
            answerDiv = $(`#${chatId}`);
        }
        content = markedHtml(content);
        answerDiv.html(content);
           // 高亮代码
        answerDiv.find('pre code').each(function (i, block) {
          hljs.highlightBlock(block);
        });
        // 添加完后滚动到底部
        scrollToBottom();
    }


    // 功能
    function share() {
        // 从 chatContent 中获取最后一个 chat-message
        const chatMessage = chatContent.children(".home_chat-message__rdH_g").last();
        const shareBtn = chatMessage.find(".home_chat-message-top-action__wXKmA.share").get(0);
        const chatBody = chatMessage.find(".markdown-body").get(0);
        const chatId=$(chatBody).attr("id");
        const shareLink=chatMessage.prop('baseURI')+"/share/"+chatId;
        $(shareBtn).on('click', function() {
            $("#chat-share-link").val(shareLink);
            $("#chat-share-modal").modal("show");
        });
        const linkCopyBtn = $("#chat-share-modal").find("#link-copy").get(0);
        const clipboard = new ClipboardJS(linkCopyBtn, {
            text: function (trigger) {
                return $("#chat-share-link").val();
            }
        });
        copyClipboard(clipboard);
    }


    // 复制功能
    function copy() {
        // 从 chatContent 中获取最后一个 chat-message
        const chatMessage = chatContent.children(".home_chat-message__rdH_g").last();
        // 从 chatMessage 找出复制按钮
        const copyBtn = chatMessage.find(".home_chat-message-top-action__wXKmA.copy").get(0);
        const clipboard = new ClipboardJS(copyBtn, {
            text: function (trigger) {
                let copyInput = chatMessage.find('.markdown-body').get(0);
                return copyInput.innerText;
            }
        });
        copyClipboard(clipboard);
    }

    function copyClipboard(clipboard) {
        clipboard.on('success', function (e) {
            // 复制成功
            successAlert("复制成功");
            e.clearSelection();
        });
        clipboard.on('error', function (e) {
            console.log('复制失败');
        });
    }

    // 添加用户端消息
    function addClientMsg(messageContent, showLoading) {
        const avatarUrl = 'https://i2.wp.com/gravatar.loli.net/avatar/?ssl=1';
        let loadingDiv = `
        <div class="home_chat-message-actions__loading">
            <div class="home_chat-message-action-loading__6ToUp">
                <div class="lds-ellipsis">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    `;

        let userMsg = `
        <div class="home_chat-message-user__WsuiB">
            <div class="home_chat-message-container__plj_e">
                <div class="home_chat-message-avatar__611lI">
                    <div class="user-avatar">
                        <img src="${avatarUrl}" alt="smiley" class="__EmojiPicker__ epr-emoji-img" loading="eager">
                    </div>
                </div>
                <div class="home_chat-message-item__hDEOq">
                    <div class="markdown-body">
                        <p>${messageContent}</p>
                    </div>
                </div>
                ${showLoading ? loadingDiv : ''}
            </div>
        </div>
    `;
        chatContent.append(userMsg);
        // 添加完后滚动到底部
        scrollToBottom();
    }

    // 添加分割线
    function addSplit() {
        let userMsg = `<div class="chat_split_hr"><span class="chat_split_txt">&nbsp;&nbsp;历史聊天分割线&nbsp;&nbsp;</span></div>`;
        chatContent.append(userMsg);
        // 添加完后滚动到底部
        scrollToBottom();
    }

    // 滚动到底部
    function scrollToBottom() {
        chatContent.scrollTop(chatContent[0].scrollHeight);
    }

    function chatDisabled() {
        // 将 button 设为禁用，防止用户连续点击
        inputField.attr("disabled", true);
        sendBtn.attr("disabled", true);
        chatType.prop('disabled', true);
    }

    function chatNormal(){
        inputField.removeAttr("disabled");
        sendBtn.removeAttr("disabled");
        chatType.prop('disabled', false);
    }

    function doSend() {
        const qa = inputField.val();
        if (qa.length > 1024) {
            errorAlert("提问长度请不要超过1024字符哦~");
            return;
        }
        addClientMsg(qa.replace(/\n/g, "<br/>"), true);
        // 清空 textarea
        inputField.val("");
        chatDisabled();
        let aiType = chatType.val();
        const data = new FormData();
        data.append('qa', qa);
        fetch(`/chat/${user.id}/${aiType}`, {
            method: 'POST',
            body: data, // 你的POST数据
        }).then(response => {
            if (!response.body || !response.body.getReader) {
                chatNormal();
                throw new Error('Response does not support streaming');
            }
            const reader = response.body.getReader();
            let buffer = '';
            let fullAnswer = '';
            let isStart = true;
            return new ReadableStream({
                start(controller) {
                    function readChunk() {
                        return reader.read().then(async ({done, value}) => {
                            if (done) {
                                controller.close();
                                chatNormal();
                                // 复制功能
                                copy();
                                // 分享功能
                                share();
                                return;
                            }
                            const chunk = new TextDecoder().decode(value);
                            buffer += chunk;
                            // 分割并处理每一行
                            const lines = buffer.split('\n');
                            for (let i = 0; i < lines.length - 1; i++) {
                                const eventStr = lines[i];
                                if (eventStr !== '') {
                                    let event = eventStr.replace(/^data:/, '');
                                    let res = JSON.parse(event);
                                    await printCharacters(res);
                                    if (isStart) {
                                        fullAnswer = '';
                                        isStart = false;
                                    }
                                }
                            }
                            buffer = lines[lines.length - 1]; // 保留未完整的一行
                            await readChunk(); // 继续读取下一块数据
                        });
                    }
                    async function printCharacters(res) {
                        let sentence = res.answer;
                        for (let word of sentence.split('')) {
                            await new Promise(resolve => setTimeout(() => {
                                fullAnswer = fullAnswer + word;
                                subscribe(res, fullAnswer);
                                resolve();
                            }, 25));
                        }
                    }
                    readChunk();
                },
            });
        });
    }

    sendBtn.click(function () {
            // 如果消息内容为空的时候重新聚焦到输入框
            if (inputField.val() === "") {
                inputField.focus();
            } else {
                // 发送消息
                doSend();
            }
    });

    inputField.keydown(function (e) {
        if (e.keyCode === 13) {
            // 按下回车的时候调用 sendbtn 的 click 事件
            sendBtn.click();
            // 阻止默认行为
            e.preventDefault();
        }
    });
</script>
</body>
</html>